<template>

	<el-card class="nopadding" shadow="never" header="登录日志">
		<el-container>
			<el-main class="nopadding">
				<fc-table ref="fcTableRef" rowKey="name" :requestApi="getUserLoginLogApi" :columns="columns"
				          :initParam="{ pageSize:15}">
					<template #user_agent="scope">
						<el-tooltip class="ellipsis-tooltip" effect="dark" :content="scope.row.user_agent"
						            placement="top">
							<div class="ellipsis-cell">{{ scope.row.user_agent }}</div>
						</el-tooltip>
					</template>
					<template #description="scope">
						<div v-if="scope.row.description == null">---</div>
						<div v-else>{{ scope.row.description }}</div>
					</template>
					<template #state="scope">
						<el-tag effect="light" :type="scope.row.state === 'success' ? 'primary' : 'danger'">
							{{ filter.state!.find(item => item.key === scope.row.state)?.label || scope.row.state }}
						</el-tag>
					</template>
				</fc-table>
			</el-main>
		</el-container>
	</el-card>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import {ColumnProps, FcTableInstance} from "@/components/fcTable/model"
import {getUserLoginLogApi} from "@/api/modules/auth.ts";
import {getLoginLogFilterApi} from "@/api/modules/setting.ts";
import {FilterModel} from "@/models/filterModel.ts";

const fcTableRef = ref<FcTableInstance | null>(null);
// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
	{prop: "id", label: "序号", width: 80},
	{prop: "ip", label: "IP", width: 180},
	{prop: "user_agent", label: "客户端"},
	{prop: "description", label: "描述", width: 200},
	{prop: "state", label: "状态", width: 100},
	{prop: "created_at", label: "登录时间", width: 200},
]);
// 过滤器
const filter = reactive<FilterModel>({
	state: []
});
const loadFilters = async () => {
	const filterData = await getLoginLogFilterApi();
	filter.state = Object.entries(filterData.data.data.state || {}).map(
		([key, label]) => ({key, label})
	);
};
onMounted(() => {
	loadFilters();
});
</script>
<style lang="scss" scoped>
.ellipsis-cell {
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>
